<script>
export default {
  name: "Child",
  data(){
    return {
      file: {} //头像
    }
  },
  methods:{
    //修改头像
    changeAvatar(){
      //向父组件传值：自定义事件:getAvatar为事件名
      //$emit是一种通知协议，自组件在传值，使用getAvatar这个事件来处理
      // this.file :就是传值的值
      this.$emit('getAvatar',this.file);
    },
    //文件域图片发生变化，执行该函数
    getFile(){
        let file = this.$refs.avatar.files[0];
        console.log('获取：',file)
        this.file = file;
    }
  }
}
</script>

<template>
    <div class="container">
      <h3>我是子组件</h3>
      <p><input type="file" @change="getFile" name="file" ref="avatar"></p>
      <p><button @click="changeAvatar">修改头像</button></p>
    </div>
</template>

<style scoped>
.container{
  width: 100%;
  height: 100vh;
  border: 1px solid blue;
}
</style>